---
import MenuBox from "@components/menuBox.astro";
import p1 from '@assets/plan/p1.png';
import p2 from '@assets/plan/p2.png';
import p3 from '@assets/plan/p3.png';
import date from '@assets/plan/date.png';

const planList= [
  {
    img: p1,
    date: '2023-02-10',
    line:[
      '带I2C通讯的、可堆叠高功率密度的电源模块（ezSiP®)-EZ8630',
      '艾诺半导体公司的电源ezSiP(System-in-Package)直流稳压器是完整的系统化封装电源解决方案'
  ],
    title:{
      cn: '基础版',
      en: 'Basic'
    },
  },
  {
    img: p2,
    date: '2023-01-10',
    line:[
      '电源也有"孪生兄弟"？—EZ8306&EZ8310',
      'EZ8306和EZ8310分别是带载6A和带载10A单路输出的超高集成度电源SiP直流稳压器。整体封装大小仅为3mm x 4mm x 1.3mm…'
  ],
    title:{
      cn: '主题2',
      en: 'Topic2'
    },
  },
  {
    img: p3,
    date: '2023-08-08',
    line:[
      '车规级芯片ES5423-拥有3μA超低工作静态电流，超低EMI噪声的3A降压转换器',
      'ES5423是杭州艾诺半导体研发的一款高性能、宽压输入同步降压转化器芯片，输入电压范围为…'
  ],
    title:{
      cn: '主题3',
      en: 'Topic1'
    },
  }
]
---
<div class="flex flex-row">
    {planList.map((item, index) => (
        <MenuBox
        class="basis-1/3 item"
        title={item.title.cn}
        secondTitle={item.title.en}
        >
        <div class="p-[16px]">
    <img src={item.img.src} class="w-full h-[152px] mb-[16px]" />
       <div class="flex items-center mb-[13px]">
        <img src={date.src} class="w-[16px] h-[16px] mr-[6px]" /> 
        <span class="text-999 text-[14px]">{item.date}</span>
        </div>
        <div class="text-[16px] text-333 mb-[10px] font-medium">{item.line[0]}</div>
        <div class="text-333">{item.line[1]}</div>
    </div>
        </MenuBox>
    ))}
</div>
<style>
    .item{
        width: calc(33% - 20px);
    }
    .item+.item{
        margin-left: 20px;
        margin-right: 20px;
    }
</style>